<template>
    <div class="wrapper">
        <div class="status-bar" :style="{'height': statusHeight}"></div>
        <bui-header @leftClick="menuShow" backgroundColor="#f49428">
        </bui-header>
        <div class="seachOuter" :style="ipxSearch">
            <div class="header-search">
                <text class="menuIcon" @click="menuShow">&#xe790;</text>
                <input class="search" :placeholder="placeholder"
                        return-key-type="done"
                        v-model="filter.lNumber"
                        style="tint-color: #f49428;"
                        @return="wxcSearchbarInputReturned()">
                </input>
                <text class="more" @click="showMore">&#xe748;</text>
            </div>
        </div>
        <wxc-popover ref="wxc-popover"
                 :buttons="btns"
                 :position="popoverPosition"
                 :arrowPosition="popoverArrowPosition"
                 @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>

        <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
            <refresh class="refresh" :style="refreshStyle" @refresh="onrefresh()" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                    <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <div class="list">
                <div class="policyCell"  v-for="(item,index) in formItem" :key="index">
                    <wxc-cell @wxcCellClicked="gotoMap(item)" title="电梯工号">
                    <image class="image" slot="label" src="bmlocal://assets/liftId.png"></image>
                    <text :style="valueStyle">{{item.lNumber}}</text>
                    <image class="locationImg" src="bmlocal://assets/location.png"></image>
                    </wxc-cell>

                    <wxc-cell @wxcCellClicked="gotoDetail(item)" :has-arrow="true" title="工单编号">
                    <image class="image" slot="label" src="bmlocal://assets/orderNumber.png"></image>
                    <text :style="valueStyle">{{item.number}}</text>
                    </wxc-cell>

                    <wxc-cell @wxcCellClicked="wxcCellClicked"
                            :has-margin="true" :has-bottom-border="false" title="维保日期">
                    <image class="image" slot="label" src="bmlocal://assets/calendar.png"></image>
                    <text :style="valueStyle">{{item.upkeepDate}}</text>
                    </wxc-cell>
                </div>
                <text class='text-no' v-if="formItem.length<=0" >暂无数据</text>
            </div>
            <loading class="refresh" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
        </scroller>

        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading>
        <menu :showMenu="showMenu" @closeMenu="menuClose"></menu>
    </div>
</div>
</template>
<script>
import menu from '../common/menu'
import util from '../utils/util';
import {buiHeader,buiIcon,buiCell} from 'bui-weex'
import { WxcCell,WxcSearchbar,WxcLoading,Utils,WxcPopover} from 'weex-ui';
var utilModule = weex.requireModule('UtilModule')
export default {
    components: {
        buiHeader,
        buiIcon,
        Utils,
        WxcCell,
        WxcLoading,
        WxcSearchbar,
        menu,
        WxcPopover,
        buiCell,
    },
    created() {
        
    },
    data() {
        return {
            token:'',
            isAndroid:false,
            formItem:[],
            filter:{
                lNumber:''
            },
            page:1,
            pageSize:10,
            totalPages:0,
            placeholder:'输入电梯工号',
            valueStyle:{
                color:'rgb(153, 153, 153)',
            },
            barStyle:{
                backgroundColor:'#f49428',
                // width:500,
            },
            btns:[
                {
                text:'全部',
                key:''
                },
                {
                text:'进行中',
                key:'1'
                },
                {
                text:'已完成',
                key:'2'
                },
            ],
            popoverPosition:{x:-5,y:120},
            popoverArrowPosition:{pos:'top',x:-10},
            showLoading:false,
            mask:true,
            showMenu:false,
            refreshing: false,
            loadinging: false,
            showRefresh:false,
            leftItem: {
                text: '菜单',
            },
            refreshStyle:{},
            statusHeight: 50,
        }
    },
    methods: {
        menuShow(){
          this.showMenu = true
        },
        menuClose(){
          this.showMenu = false
        },
        showMore(){
            this.$refs['wxc-popover'].wxcPopoverShow();
        },
        popoverButtonClicked(obj){
            this.filter.status = obj.key
            this.getPolicyList(true)
        },
        wxcSearchbarInputReturned(){
            // this.filter.lNumber = value
            this.getPolicyList(true)
        },
        wxcSearchbarInputOnInput(e){
            
        },
        wxcSearchbarCancelClicked(){
            this.filter = {}
            this.getPolicyList(true)
        },
        onrefresh(){
            this.refreshing = true
            this.getPolicyList(true)
        },
        onloading(){
            this.loadinging = true
            if(this.totalPages == this.page){
                this.$notice.toast({
                    message: '没有更多了'
                })
                setTimeout(() => {
                    this.loadinging = false
                }, 500)
            }else{
                this.page = this.page + 1
                this.getPolicyList()    
            } 
        },
        //地图
        gotoMap(item){
            this.$router.open({
                name: 'map',
                params:{data:item}
            })
        },
        //保单详情页
        gotoDetail(item){
            this.showLoading = true
            let filter = {}
            filter.upkeepId = item.id
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'POST',    
                name: 'getUpkeepDetail',
                data: filter
            }).then(resData => {
                if(resData.success){
                    this.$storage.set('upkeepDetail_'+item.id, JSON.stringify(resData.data))
                    this.showLoading = false
                    //跳转详情页
                    this.$router.open({
                        name: 'maintenaceDetail',
                        params:{upkeepId:item.id}
                    })
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                // this.$notice.toast({
                //     message: '网络错误'
                // })
            })
            this.showLoading = false
            
        },
        getPolicyList(refresh){
            this.$notice.loading.show()
            if(refresh){
               this.page = 1
               this.pageSize = 10
            }
            this.filter.page = this.page
            this.filter.pageSize = this.pageSize
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'POST',    
                name: 'myUpkeepList',
                data: this.filter
            }).then(resData => {
                if(resData.success){
                    if(refresh){
                        this.formItem = resData.data.content
                    }else{
                        this.formItem = this.formItem.concat(resData.data.content)
                    }
                    this.totalPages = resData.data.totalPages
                    // if(!this.filter){
                    //     this.$storage.set('myPolicyList', JSON.stringify(resData.data.content))
                    // }
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.$notice.loading.hide()
            setTimeout(() => {
                this.refreshing = false
                this.loadinging = false
            }, 500)
        }
    },
    created(){
        this.$notice.loading.show()
        this.isAndroid = Utils.env.isAndroid()
        const tabPageHeight = Utils.env.getPageHeight()
        
        if(Utils.env.isIOS()){
            this.ipxSearch = {top:'70px'}
            this.statusHeight = 20
        }else{
            this.refreshStyle = {marginTop:'-90px'}
        }
        const containerHeight = tabPageHeight
        this.scrollerStyle ={ height: containerHeight + 'px' }
        // 获取token
        this.token = this.$storage.getSync('token')
        if(!this.token){
            this.$router.setHomePage('/pages/login.js')
        }

        // 获取缓存数据
        // this.$storage.get('myPolicyList').then(resData => {
        //      this.formItem = JSON.parse(resData);
        // },error => {
        //     this.getPolicyList()
        // })
        this.getPolicyList(true)
        this.$notice.loading.hide()
    }
    
}
</script>
<style scoped>
.status-bar{
    background-color:#f49428;
}
.staffList {
    width: 750px;
    background-color: #f2f3f4;
}
.image {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.locationImg{
    width: 40px;
    height: 50px;
}
.container {
    flex: 1;
    width: 750px;
    background-color: #f2f3f4;
}
.refresh {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
.indicator {
    /* margin-top: 16px; */
    height: 80px;
    width: 80px;
    color: #f49428;
}

.list{
    /* margin-top: -90px; */
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}
.text-no{
  text-align: center;
  margin-top: 100;
  font-size: 35;
  color: #999999
}
.seachOuter{
    position: absolute;
    top: 55;
    left: 20;
}
.header-search{
    background-color: #f49428;
    width: 750px;
    height: 70px;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
}
.search{
    flex:7;
    background-color: #f2f3f4;
    height: 55px;
    padding-left: 10px;
    /* border-width: 1px; */
    border-radius: 10px;
}
.menuIcon{
    font-family: iconfont;
    color: #ffffff;
    font-size: 50px;
    flex:1;
}
.more{
    font-family: iconfont;
    color: #ffffff;
    font-size: 40px;
    flex:1;
    margin-left: 20px;
}
</style>

